﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <script src="../Scripts/crypto-js.js"></script>
  <script src="../Scripts/secret.js"></script>
  <title>装配计划看板v2.0</title>
  <style>
    .item {
      padding: 5px 0px;
    }

    .label {
      padding: 0 10px;
      display: inline-block;
      height: 30px;
      line-height: 30px;
      border-radius: 3px;
      color: #fff;
    }

    .bigstep {
      font-size: 12px;
    }

    /* 未完工 */
    .not-finish {
      background-color: #F56C6C;
    }

    /* 按时完工 */
    .intime-finish {
      background-color: #0fd850;
    }

    /* 延期完工 */
    .delay-finish {
      background-color: #E6A23C;
    }

    /* 空数据 */
    .empty {
      text-align: center;
      font-size: 14px;
      color: #5e6d82;
      line-height: 1.5em;
    }

    #engineCatchData .el-date-editor.el-input,
    #engineCatchData .el-date-editor.el-input__inner {
      width: 115px !important;
    }

    #engineCatchData .el-input--prefix .el-input__inner {
      padding-left: 10px !important;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak v-on:keyup.enter="getData">
    <el-row class="header">
      <el-col :span="6"><img src="../images/aeec_logo.png" height="60" alt="黎阳LOGO" /></el-col>
      <el-col :span="12" class="header-title">装配计划看板</el-col>
      <el-col :span="6" class="currentTime">{{currentTime}}</el-col>
    </el-row>

    <div style="padding: 10px;" id="queryZone">
      <!-- 查询条件区 -->
      <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" :rules="rules">
        <el-form-item prop='engineno' label="发动机号:">
          <el-autocomplete v-model.trim="queryInfo.engineno" placeholder="请输入发动机号" :trigger-on-focus="false"
            :fetch-suggestions="getEngineNoAsync" :value-key="'engineno'" :debounce="500" style="width:300px;">
          </el-autocomplete>
        </el-form-item>

        <el-form-item label="计划完成时间:" prop="selectdate">
          <el-date-picker v-model="queryInfo.selectdate" type="daterange" range-separator="至" value-format="yyyy-MM-dd"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getData">查询</el-button>
          <span class="label intime-finish">按时完工</span>
          <span class="label delay-finish">延期完工</span>
          <span class="label not-finish">未完工</span>
          <el-link icon="el-icon-link" type="primary" @click="open('ZSWorkflownameReport.html','施工单报表')">施工单报表</el-link>
        </el-form-item>
      </el-form>

      <!-- 主页表格 -->
      <el-table :data="dataList" stripe border ref="table" height="720" v-loading="loading"
        v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
        element-loading-background="rgba(0,0,0,0.8)">
        <el-table-column type="index" width="50px" fixed></el-table-column>
        <el-table-column label="发动机号" prop="engineno" width="200" fixed>
          <template slot-scope="scope">
            <div class="item" @click="getEngineCatchInfoData(scope.row)">
              <el-link type="primary" style="font-size: 16px;">{{scope.row.engineno}}</el-link>
            </div>
          </template>
        </el-table-column>

        <!-- 动态渲染表格列 -->
        <el-table-column v-for="col in colums" :label="col.label" :key="col.value" :prop="col.value" width="180"
          align="left">
          <template slot-scope="scope">
            <div v-if="scope.row[col.value] && scope.row[col.value].length === 0">
              <div class="empty"></div>
            </div>
            <div v-else>
              <div v-for="i in scope.row[col.value]">
                <div>
                  <span @click="showDetailInfo(i)" style="cursor:pointer;">
                    <span class="label bigstep not-finish" v-if="i.finishstatus === '未完工'">
                      {{i.workflowstepname}}
                    </span>
                    <span class="label bigstep delay-finish" v-else-if="i.finishstatus === '延期完工'">
                      {{i.workflowstepname}}
                    </span>
                    <span class="label bigstep intime-finish" v-else>
                      {{i.workflowstepname}}
                    </span>
                  </span>
                </div>
                <div><span v-if="i.finishdate">
                    <i class="el-icon-success" style="color:#0fd850;"></i>
                    已于 {{i.finishdate.split('T')[0]}} 完工</span>
                  <span v-else>&nbsp;</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 主表格分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage" :page-sizes="[queryInfo.pageSize,100,500]" :page-size="queryInfo.pageSize"
        layout="prev,pager,next,jumper,sizes,total" :total="total">
      </el-pagination>

      <!-- 回到顶部 -->
      <el-backtop></el-backtop>

      <!-- 发动机追赶及现状信息 -->
      <el-dialog :title="engineCatchInfoData.title" :width="'98%'" :center="true" :top="'15px'"
        :visible.sync="engineCatchInfoData.dialogVisiable" id="engineCatchData" height="600">
        <el-form style="margin-bottom: 5px;">
          <el-button type="success" icon="el-icon-success" size="small" @click="saveEngineCatchData">保存</el-button>
        </el-form>
        <el-table :data="engineCatchInfoData.dataList" stripe border ref="table" v-loading="loading"
          v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)">
          <el-table-column type="index" width="50px" fixed></el-table-column>
          <el-table-column label="发动机号" prop="engineno" width="100" v-if="false"></el-table-column>
          <el-table-column label="" prop="name" width="80"></el-table-column>
          <el-table-column label="0010-去封/集件" prop="0010-去封/集件" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0010-去封/集件']">{{scope.row['0010-去封/集件'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0010-去封/集件']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0020-部装" prop="0020-部装" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0020-部装']">{{scope.row['0020-部装'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0020-部装']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0030-传装" prop="0030-传装" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0030-传装']">{{scope.row['0030-传装'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0030-传装']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0040-总装" prop="0040-总装" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0040-总装']">{{scope.row['0040-总装'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0040-总装']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0050-工厂试车" prop="0050-工厂试车" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0050-工厂试车']">{{scope.row['0050-工厂试车'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0050-工厂试车']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0060-整机分解" prop="0060-整机分解" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0060-整机分解']">{{scope.row['0060-整机分解'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0060-整机分解']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0070-返件和故检" prop="0070-返件和故检" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0070-返件和故检']">{{scope.row['0070-返件和故检'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0070-返件和故检']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0080-集件" prop="0080-集件" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0080-集件']">{{scope.row['0080-集件'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0080-集件']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0090-部装" prop="0090-部装" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0090-部装']">{{scope.row['0090-部装'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0090-部装']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0100-传装" prop="0100-传装" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0100-传装']">{{scope.row['0100-传装'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0100-传装']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0110-总装" prop="0110-总装" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0110-总装']">{{scope.row['0110-总装'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0110-总装']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0120-检验试车" prop="0120-检验试车" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0120-检验试车']">{{scope.row['0120-检验试车'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0120-检验试车']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0130-装箱单" prop="0130-装箱单" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0130-装箱单']">{{scope.row['0130-装箱单'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0130-装箱单']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0140-审查卷宗" prop="0140-审查卷宗" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0140-审查卷宗']">{{scope.row['0140-审查卷宗'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0140-审查卷宗']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="0150-铅封" prop="0150-铅封" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '计划' || scope.row.name == '实际'">
                <span v-if="scope.row['0150-铅封']">{{scope.row['0150-铅封'].split('T')[0]}}</span>
              </div>
              <div v-else>
                <el-date-picker v-model="scope.row['0150-铅封']" type="date" placeholder="选择日期" prefix-icon="''"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!-- 缺件信息弹窗 -->
      <el-dialog :title="lackInfoData.title" :width="'98%'" :center="true" :top="'15px'"
        :visible.sync="lackInfoData.dialogVisiable">
        <!-- 表格 -->
        <el-table :data="lackInfoData.dataList" stripe border ref="table" v-loading="loading"
          v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)">
          <el-table-column type="index" width="50px" fixed></el-table-column>
          <el-table-column label="发动机号" prop="machineno" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="订单号" prop="mfgordername" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="任务单号" prop="containerno" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="任务类型" prop="containertype" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="部件名称" prop="productdesc" show-overflow-tooltip></el-table-column>
          <el-table-column label="工序号" prop="specno" width="60" show-overflow-tooltip></el-table-column>
          <el-table-column label="工序名称" prop="specname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="计划开始时间" prop="plannedstartdate" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.plannedstartdate">
              {{scope.row.plannedstartdate.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="计划结束时间" prop="plannedfinishdate" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.plannedfinishdate">
              {{scope.row.plannedfinishdate.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="件号" prop="productname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="名称" prop="description" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="需求数量" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.checktype === 1">{{scope.row.firstassembleqty}}</span>
              <span v-else>{{scope.row.checkassembleqty}}</span>
            </template>
          </el-table-column>
          <el-table-column label="去封/集件报工数" prop="confirmqty" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="缺件数量" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.checktype === 1">
                <el-tag effect="dark" :type="scope.row.firstlackqty > 0 ? 'danger' : 'success'">
                  {{scope.row.firstlackqty}}</el-tag>
              </span>
              <span v-else>
                <el-tag effect="dark" :type="scope.row.checklackqty > 0 ? 'danger' : 'success'">
                  {{scope.row.checklackqty}}</el-tag>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="大阶段" prop="workflowstepname" width="100" show-overflow-tooltip></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="handleLackInfoDataCurrentChange"
          :current-page="lackInfoData.queryInfo.currentPage" :page-sizes="[12]"
          :page-size="lackInfoData.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="lackInfoData.total">
        </el-pagination>
      </el-dialog>

      <!-- 排故返件弹窗 -->
      <el-dialog :title="dealFaultData.title" :width="'98%'" :center="true" :top="'15px'"
        :visible.sync="dealFaultData.dialogVisiable">
        <el-table :data="dealFaultData.dataList" stripe border ref="table" v-loading="loading"
          v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)">
          <el-table-column type="index" width="50px" fixed></el-table-column>
          <el-table-column label="排故单号" prop="dealfaultbillname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="订单号" prop="mfgordername" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="订单类型" prop="ordertypename" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="任务单号" prop="togetherflag" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="机型" prop="enginefamily" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="发动机号" prop="engineno" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="发动机工作时间" prop="machineworkhours" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column label="排故类型" prop="dealfaulttype" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="不合格审理单号" prop="zbhgdh" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="合格数量" prop="recvfactorypassqty" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="报废数量" prop="recvfactoryfailqty" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="检验员" prop="checker" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件号" prop="matnr" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件名称" prop="description" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="批次号" prop="containername" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="返件状态" prop="transferstatus" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="维护次数" prop="repaircount" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="表格页数" prop="pagecount" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="发出单位" prop="sendfactory" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="发出数量" prop="fromqty" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="发出人" prop="fromemp" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="发出时间" prop="fromtime" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.fromtime">
              {{scope.row.fromtime.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="要求完成时间" prop="requirefinishtime" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.requirefinishtime">
              {{scope.row.requirefinishtime.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="返分厂" prop="returnfactory" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="接收单位" prop="recvfactory" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="接收班组" prop="recvfactoryteam" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="接收人" prop="recvemp" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="接收数量" prop="recvfactoryqty" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="接收时间" prop="recvfactorytime" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.recvfactorytime">
              {{scope.row.recvfactorytime.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="排故后返回操作人" prop="factoryreturnemp" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="排故后源厂接收人" prop="acceptemp" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="分厂返回时间" prop="recvfactoryreturntime" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.recvfactoryreturntime">
              {{scope.row.recvfactoryreturntime.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="排故后返回班组" prop="acceptteam" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="接收分厂返回人" prop="recvfactoryreturnemp" width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="接收返回时间" prop="accepttime" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.accepttime">
              {{scope.row.accepttime.split('T')[0]}}
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!-- 任务单信息 -->
      <el-dialog :title="containerInfo.title" :width="'98%'" :center="true" :top="'15px'"
        :visible.sync="containerInfo.dialogVisiable">
        <el-table :data="containerInfo.dataList" stripe border ref="table" v-loading="loading"
          v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)">
          <el-table-column type="index" width="50px" fixed></el-table-column>
          <el-table-column label="批次id" prop="containerid" width="100" v-if="false" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="发动机号" prop="machineno" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="订单号" prop="mfgordername" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="任务单号" prop="containerno" show-overflow-tooltip></el-table-column>
          <el-table-column label="任务类型" prop="containertype" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="件号" prop="productname" width="130" show-overflow-tooltip></el-table-column>
          <el-table-column label="件号名称" prop="productdesc" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="工艺名称" prop="workflowname" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="计划开始" prop="plannedstartdate" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.plannedstartdate">
              {{scope.row.plannedstartdate.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="计划完成" prop="plannedfinishdate" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.plannedfinishdate">
              {{scope.row.plannedfinishdate.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="实际开始" prop="startworkdate" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.startworkdate">
              {{scope.row.startworkdate.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="实际完成" prop="finishdate" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.finishdate">
              {{scope.row.finishdate.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-link type="primary" @click='getContainerSpecInfo(scope.row)'>查看工序</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!-- 任务单工序明细 -->
      <el-dialog :title="containerSpecInfo.title" :width="'98%'" :center="true" :top="'15px'"
        :visible.sync="containerSpecInfo.dialogVisiable">
        <el-table :data="containerSpecInfo.dataList" stripe border ref="table" v-loading="loading"
          v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)">
          <el-table-column type="index" width="50px" fixed></el-table-column>
          <el-table-column label="大阶段" prop="bigstep" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="任务单" prop="containerno" show-overflow-tooltip></el-table-column>
          <el-table-column label="当前工序" prop="currentspec" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="件号" prop="productname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="件号名称" prop="productdescription" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="工序" prop="workflowstepname" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="派工时间" prop="dispatchdate" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.dispatchdate">
              {{scope.row.dispatchdate.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="接收时间" prop="recvdate" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.recvdate">
              {{scope.row.recvdate.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="开工时间" prop="startworkdate" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.startworkdate">
              {{scope.row.startworkdate.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="报工时间" prop="reportdate" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.reportdate">
              {{scope.row.reportdate.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="检验时间" prop="checkdate" width="100" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.checkdate">
              {{scope.row.checkdate.split('T')[0]}}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="status" width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === '已完工'" type="success" effect="dark">已完工</el-tag>
              <el-tag v-else-if="scope.row.status === '待检验'" type="danger" effect="dark">待检验</el-tag>
              <el-tag v-else-if="scope.row.status === '待报工'" type="warning" effect="dark">待报工</el-tag>
              <el-tag v-else-if="scope.row.status === '待开工'" type="info" effect="dark">待开工</el-tag>
              <el-tag v-else-if="scope.row.status === '待接收'" type="info" effect="dark">待接收</el-tag>
              <el-tag v-else type="info" effect="dark">待派工</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>

  <script type="module">
    import { getParams, fetchSuggestion, getUserWhiteList } from '../Scripts/hooks/useCommonMethod.js'
    import { prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth } from '../Scripts/hooks/useDateShortCut.js'
    const app = new Vue({
      el: '#app',
      data: {
        currentTime: '',
        total: 0,
        loading: false,
        loadingText: '数据加载中...',
        queryInfo: {
          factoryid: '',
          engineno: '',//发动机号
          selectdate: '',//排产时间
          currentPage: 1,//当前页
          pageSize: 10//每页显示条数
        },
        employeeid: '',
        whiteList: [],
        hasAuthorization: false,//用户是否有增、删、改权限
        colums: [],
        selectdateList: [],
        dataList: [],
        rules: {
          selectdate: [{ required: true, message: '计划完成时间不能为空', trigger: 'change' }]
        },
        pickerOptions: { shortcuts: [prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth] },
        // 发动机追赶及现状信息
        engineCatchInfoData: {
          dialogVisiable: false,
          title: '',
          colums: [],
          dataList: []
        },
        // 缺件信息
        lackInfoData: {
          dialogVisiable: false,
          title: '',
          dataList: [],
          queryInfo: {
            workflowstepname: '',
            engineno: '',
            currentPage: 1,
            pageSize: 12
          },
          total: 0
        },
        // 排故返件信息
        dealFaultData: {
          dialogVisiable: false,
          title: '',
          dataList: []
        },
        // 任务单信息
        containerInfo: {
          dialogVisiable: false,
          title: '',
          dataList: []
        },
        // 任务单工序明细
        containerSpecInfo: {
          dialogVisiable: false,
          title: '',
          dataList: []
        }
      },
      methods: {
        // 查询发动机号
        getEngineNoAsync(value, callback) {
          fetchSuggestion({ actionName: 'getEngineNoAsync', name: 'engineno', value, callback })
        },
        // 查询数据
        async getData() {
          this.$refs['queryInfoRef'].validate(async (valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空')
            } else {
              const [start, end] = this.queryInfo.selectdate;
              const diff = dayjs(end).diff(dayjs(start), 'day');
              if (diff > 30) {
                return this.$message.error('时间范围不能超过30天');
              }
              this.colums = [];
              this.selectdateList = [];
              for (let i = 0; i <= diff; i++) {
                let value = dayjs(start).add(i, 'day').format('YYYY-MM-DD');
                let label = "";
                const d = dayjs(value).format('d');
                if (d === '0') {
                  label = `${value}【周日】`;
                } else if (d === '1') {
                  label = `${value}【周一】`;
                } else if (d === '2') {
                  label = `${value}【周二】`;
                } else if (d === '3') {
                  label = `${value}【周三】`;
                } else if (d === '4') {
                  label = `${value}【周四】`;
                } else if (d === '5') {
                  label = `${value}【周五】`;
                } else {
                  label = `${value}【周六】`;
                }
                this.colums.push({ value, label, day: d });
                this.selectdateList.push(value);
              }
              this.loading = true;
              this.loadingText = "数据加载中...";
              const { data: res } = await axios.post('../handler/board/ZSMonthTaskBoardV2.ashx?action=getData', {
                type: 'getData',
                ...this.queryInfo,
                colums: this.selectdateList
              })
              this.loading = false;
              if (res.meta.status === 500) {
                return this.$message.error(res.meta.msg)
              }
              this.dataList = res.data;
              this.total = res.total;
              this.$refs["table"].doLayout();
            }
          })
        },
        // 发动机追赶及现状信息
        async getEngineCatchInfoData(row) {
          const { engineno } = row;
          this.engineCatchInfoData.dialogVisiable = true;
          this.engineCatchInfoData.title = `发动机:【${engineno}】计划及实际完成情况`;
          this.loading = true;
          this.loadingText = "数据加载中...";
          const { data: res } = await axios.post('../handler/board/ZSMonthTaskBoardV2.ashx?action=getEngineCatchInfoData', {
            type: 'getEngineCatchInfoData',
            engineno,
            selectdate: this.queryInfo.selectdate
          })
          this.loading = false;
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg)
          }
          this.engineCatchInfoData.dataList = res.data;
          this.engineCatchInfoData.colums = [];
          for (let i in res.data[0]) {
            if (i === 'engineno') { continue; }
            this.engineCatchInfoData.colums.push({ label: i, value: i });
          }
        },
        // 保存发动机【现状时间】、【追赶时间】
        async saveEngineCatchData() {
          if (!this.hasAuthorization) {
            return this.$message.error('当前用户没有保存权限!');
          }
          const confirmResult = await this.$confirm('是否保存追赶及追赶信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)

          // 取消保存
          if (confirmResult !== 'confirm') {
            return this.$message.info('已取消保存!');
          }

          this.loading = true;
          this.loadingText = "数据保存中...";

          const { data: res } = await axios.post('../handler/board/ZSMonthTaskBoardV2.ashx?action=saveEngineCatchData', {
            type: 'saveEngineCatchData',
            willBeSavedData: this.engineCatchInfoData.dataList,
            employeeid: this.employeeid
          })
          this.loading = false;
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg);
          }
          this.$message.success('保存成功!');
        },
        // 各大阶段明细
        showDetailInfo(row) {
          const { engineno, workflowstepname } = row;
          if (workflowstepname === '0010-去封/集件' || workflowstepname === '0080-集件') {
            this.lackInfoData.dialogVisiable = true;
            this.lackInfoData.title = `发动机:【${engineno}】缺件信息`;
            this.lackInfoData.queryInfo.workflowstepname = workflowstepname;
            this.lackInfoData.queryInfo.engineno = engineno;
            this.getLackInfo();
          } else if (workflowstepname === '0070-返件和故检') {
            this.dealFaultData.dialogVisiable = true;
            this.dealFaultData.title = `发动机:【${engineno}】排故返件信息`;
            this.getDealFaultInfo(row);
          } else {
            this.containerInfo.dialogVisiable = true;
            this.containerInfo.title = `发动机:【${engineno}】大阶段:【${workflowstepname}】任务单信息`;
            this.getContainerInfo(row);
          }
        },
        // 查询缺件信息
        async getLackInfo(row) {
          this.loading = true;
          this.loadingText = "数据加载中...";
          const { data: res } = await axios.post('../handler/board/ZSMonthTaskBoardV2.ashx?action=getLackInfo', {
            type: 'getLackInfo',
            ...this.lackInfoData.queryInfo
          });
          this.loading = false;
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg);
          }
          this.lackInfoData.dataList = res.data;
          this.lackInfoData.total = res.total;
        },
        // 查询排故信息
        async getDealFaultInfo(row) {
          const { engineno, workflowstepname } = row;
          this.loading = true;
          this.loadingText = "数据加载中...";
          const { data: res } = await axios.post('../handler/board/ZSMonthTaskBoardV2.ashx?action=getDealFaultInfo', {
            type: 'getDealFaultInfo',
            engineno,
            workflowstepname
          });
          this.loading = false;
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg);
          }
          this.dealFaultData.dataList = res.data;
        },
        // 任务单信息
        async getContainerInfo(row) {
          const { engineno, workflowstepname } = row;
          this.loading = true;
          this.loadingText = "数据加载中...";
          const { data: res } = await axios.post('../handler/board/ZSMonthTaskBoardV2.ashx?action=getContainerInfo', {
            type: 'getContainerInfo',
            engineno,
            workflowstepname
          });
          this.loading = false;
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg);
          }
          this.containerInfo.dataList = res.data;
        },
        // 任务单各工序
        async getContainerSpecInfo(row) {
          const { containerid, containerno } = row;
          this.containerSpecInfo.dialogVisiable = true;
          this.containerSpecInfo.title = `任务单:【${containerno}】工序加工明细`;
          this.loading = true;
          this.loadingText = "数据加载中...";
          const { data: res } = await axios.post('../handler/board/ZSMonthTaskBoardV2.ashx?action=getContainerSpecInfo', {
            type: 'getContainerSpecInfo',
            containerid
          });
          this.loading = false;
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg);
          }
          this.containerSpecInfo.dataList = res.data;
        },
        handleCurrentChange(newPage) {
          this.queryInfo.currentPage = newPage;
          this.getData();
        },
        handleSizeChange(newSize) {
          this.queryInfo.pageSize = newSize;
          this.getData();
        },
        // 缺件明细分页
        handleLackInfoDataCurrentChange(newPage) {
          this.lackInfoData.queryInfo.currentPage = newPage;
          this.getLackInfo();
        },
        async open(pageurl, reportname) {
          this.$confirm(`即将跳转并打开【${reportname}】`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const { origin, search } = window.location;
            let url = `${origin}/MESReport/Baobiao/${pageurl}${search}`;
            window.open(url);
          }).catch(() => {
            this.$message.info('取消跳转');
          });
        }
      },
      async mounted() {
        let incrementNumber = () => {
          setTimeout(incrementNumber, 500);
          this.currentTime = dayjs().format('YYYY年MM月DD日  HH:mm:ss');
        }
        setTimeout(incrementNumber, 500);
        this.queryInfo.factoryid = Decrypt(getParams('factoryid'));
        const start = dayjs().startOf('month').format('YYYY-MM-DD');
        const end = dayjs().endOf('month').format('YYYY-MM-DD');
        // 筛选时间默认：本月
        this.queryInfo.selectdate = [start, end];
        const diff = dayjs(end).diff(dayjs(start), 'day');
        this.colums = [];
        this.selectdateList = [];
        for (let i = 0; i <= diff; i++) {
          let value = dayjs(start).add(i, 'day').format('YYYY-MM-DD');
          let label = "";
          const d = dayjs(value).format('d');
          if (d === '0') {
            label = `${value}【周日】`;
          } else if (d === '1') {
            label = `${value}【周一】`;
          } else if (d === '2') {
            label = `${value}【周二】`;
          } else if (d === '3') {
            label = `${value}【周三】`;
          } else if (d === '4') {
            label = `${value}【周四】`;
          } else if (d === '5') {
            label = `${value}【周五】`;
          } else {
            label = `${value}【周六】`;
          }
          this.colums.push({ value, label, day: d });
          this.selectdateList.push(value);
        }
        this.getData();

        if (!getParams('uid')) {
          this.formDisable = true;
          return this.$notify.error({ title: '错误', message: '缺少用户信息!', duration: 0 });
        }

        this.employeeid = getParams("uid");
        // 获取用户权限白名单
        const pageurl = window.location.pathname.split('/')[3];
        this.whiteList = await getUserWhiteList(pageurl, this.$message);

        if (this.whiteList.indexOf(this.employeeid) > -1) {
          this.hasAuthorization = true;
        }
      },
      watch: { queryInfo: { handler() { this.queryInfo.currentPage = 1 }, deep: true } }
    })
  </script>
</body>

</html>